<!DOCTYPE html>
<html>
    <head>
        <meta charset='UTF-8'>
        <link rel="stylesheet" type="text/css" href="./iconfont.css"/>
        <script type="text/javascript" async src="./MathJax/MathJax.js?config=TeX-AMS_CHTML"></script>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            ul,ol{
                list-style: none;
            }
            .item{
                height: 90px;
                padding: 0 24px;
                line-height: 90px;
                font-size: 24px;
                border-bottom: 1px dashed #333333;
                display: flex;
            }
            .iconfont.new::before{
                content: "\e6ab";
                font-size: 30px;
            }
            .preview{
                margin-left: 5px;
                width: 0;
                flex-grow: 1;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .hidden{
                visibility: hidden;
            }
        </style>
    </head>
    <body>
        <script>
            function render(encodedJson){
                let items = JSON.parse(decodeURIComponent(encodedJson));
                let itemsUl = document.createElement("ul");
                document.body.appendChild(itemsUl);
                for(let i=0,l=items.length;i<l;i++){
                    let item = items[i];
                    let itemLi = document.createElement("li");
                    itemLi.classList.add("item");
                    let newSpan = document.createElement("span");
                    newSpan.classList.add("iconfont");
                    newSpan.classList.add("new");
                    if(!item.remind) newSpan.classList.add("hidden");
                    itemLi.appendChild(newSpan);
                    let previewDiv = document.createElement("div");
                    previewDiv.classList.add("preview");
                    previewDiv.innerHTML = item.title?item.title:item.questions[0].stem;
                    itemLi.appendChild(previewDiv);
                    itemsUl.appendChild(itemLi);
                    itemLi.onclick = event=>{
                        window.itemList.itemClick(i);
                    }
                }
                MathJax.Hub.Queue(["Typeset", MathJax.Hub]);
            }
        </script>
    </body>
</html>